import React, { Component } from "react";
import { Form, Input, Table, Button,Row,Col,DatePicker } from "antd";
import Content from "../../components/Content";
const { Search } = Input;
const { Item } = Form;
const { RangePicker } = DatePicker;
const columns = [
  {
    title: "序号",
    key: "1",
    dataIndex: "strain_number",
    className: "strain_number"
  },
  {
    title: "任务编号",
    dataIndex: "other_numberme",
    className: "other_numberme"
  },
  {
    title: "任务来源",
    dataIndex: "generic_name",
    className: "generic_name"
  },
  {
    title: "任务内容",
    dataIndex: "words",
    className: "words"
  },
  {
    title: "任务进程",
    dataIndex: "strain_name",
    className: "strain_name"
  },
  {
    title: "参与环节",
    dataIndex: "strain_name",
    className: "strain_name"
  },
  {
    title: "工作人员",
    dataIndex: "popular_name",
    className: "popular_name"
  },
  {
    title: "参与环节时间",
    dataIndex: "strain_name",
    className: "strain_name",
    children:[
      
        {
          title: "开始时间",
          dataIndex: "popular_2name",
          className: "popular_3name"
        },
        {
          title: "结束时间",
          dataIndex: "popular_n4ame",
          className: "popular_n5ame"
        }
      
    ]
  },
  {
    title: "总体任务时间",
    dataIndex: "strain_name",
    className: "strain_name",
    children:[
      
        {
          title: "开始时间",
          dataIndex: "popular_2name",
          className: "popular_3name"
        },
        {
          title: "结束时间",
          dataIndex: "popular_n4ame",
          className: "popular_n5ame"
        }
      
    ]
  },
  {
    title: "操作",
    className: "operate",
    dataIndex: "",
    render: () => (
      <span>
        <a>选择</a>
      </span>
    )
  }
];

const data = [];
for (let i = 0; i < 7; i++) {
  data.push({
    key: i,
    strain_number: `${i}`,
    other_numberme: 666666666,
    generic_name: `属名 ${i}`,
    words: `种加词 ${i}`,
    strain_name: `学名 ${i}`,
    popular_name: `俗名 ${i}`,
    habitat: `成分 ${i}`,
    potential_use: `用途 ${i}`,
    operate: `London, Park Lane no. ${i}`
  });
}

class Query_mediumForm extends Component {
  constructor(props) {
    super(props);
  }
  state = {
    selectedRowKeys: [], // Check here to configure the default column
    loading: false
  };

  start = () => {
    this.setState({ loading: true });
    // ajax request after empty completing
    setTimeout(() => {
      this.setState({
        selectedRowKeys: [],
        loading: false
      });
    }, 1000);
  };

  onSelectChange = selectedRowKeys => {
    console.log("selectedRowKeys changed: ", selectedRowKeys);
    this.setState({ selectedRowKeys });
  };

  render() {
    const { loading, selectedRowKeys } = this.state;
    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange
    };
    const hasSelected = selectedRowKeys.length > 0;
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 8 }
      }
    };
    return (
      <div class="content">
        <div className="filtrate">
        <Form {...formItemLayout} onSubmit={this.onSubmit} colon={false}>
        <Item label="任务编号">
          {getFieldDecorator("picture")(<Input />)}
        </Item>
        <Item label="任务来源">{getFieldDecorator("comefrom")(<Input />)}</Item>
        <Item label="任务内容">{getFieldDecorator("content")(<Input />)}</Item>
        <Item label="任务进程">{getFieldDecorator("course")(<Input />)}</Item>
        <Item label="工作人员">{getFieldDecorator("member")(<Input />)}</Item>
        <Item label="任务起止时间">
          <RangePicker
            showTime={{ format: 'HH:mm' }}
            format="YYYY-MM-DD HH:mm"
            placeholder={[' ', ' ']}
          />
        </Item>
        <Item wrapperCol={{ span: 12, offset: 4 }}>
          <Row guuter={16}>
            <Col span={6}>
              <Button type="primary" htmlType="submit">
                保存
              </Button>
            </Col>
            <Col span={6}>
              <Button type="primary">批量处理</Button>
            </Col>
          </Row>
        </Item>
      </Form>
        </div>
        <div style={{ marginTop: 36, marginLeft: 24 }}>
          <Button
            type="primary"
            onClick={this.start}
            // disabled={!hasSelected}
            loading={loading}
            style={{ width: 120 }}
          >
            查看所有任务
          </Button>
        </div>
        <Table
          columns={columns}
          dataSource={data}
          bordered
          style={{ marginLeft: 12 }}
        />
      </div>
      
    );
  }
}
const WrapperedQuery_mediumForm = Form.create({
  name: "query medium"
})(Query_mediumForm);

class StrainCreat extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  onSubmit = () => {
    const { form } = this.form.props;
    form.validateFields((errs, values) => {
      console.log(errs, values);
    });
  };
  render() {
    return (
      <Content>
        <WrapperedQuery_mediumForm
          wrappedComponentRef={ref => (this.form = ref)}
          onSubmit={this.onSubmit}
        />
      </Content>
    );
  }
}

export default StrainCreat;
